<template>
  <view class="news-container">
    <!-- 公告列表 -->
    <view class="news-list">
      <view class="news-item" v-for="(item, index) in newsList" :key="index" @click="goToDetail(item)">
        <view class="news-content">
          <view class="news-title">{{ item.title }}</view>
          <view class="news-brief">{{ item.brief }}</view>
          <view class="news-footer">
            <text class="news-time">{{ item.createTime }}</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 无数据提示 -->
    <view class="empty-tip" v-if="newsList.length === 0">
      <image src="/static/images/index_page.png" mode="aspectFit" class="empty-icon"/>
      <text>暂无系统公告</text>
    </view>
  </view>
</template>

<script>
import config from '@/config/config.js'

export default {
  data() {
    return {
      newsList: [],
      pageNum: 1,
      pageSize: 1,
      hasMore: true,
      loading: false
    }
  },
  methods: {
    goToDetail(item) {
      uni.navigateTo({
        url: './newsDetail?noticeId=' + item.noticeId
      })
    },
    
    // 获取公告列表
    async getNoticeList(refresh = false) {
      if (this.loading) return
      this.loading = true
      
      try {
        if (refresh) {
          this.pageNum = 1
          this.hasMore = true
          this.newsList = []
        }
        
        const result = await this.$http.post(config.api.slconfig.sysNoticeList, {
          pageNum: this.pageNum,
          pageSize: this.pageSize
        })
        
        console.log('公告列表响应:', result)
        
        if (result.data.code === 200 || result.data.code === 201) {
          const data = result.data
          const notices = data.rows || []
          
          // 如果返回了最新公告ID，保存到本地
          if (data.lastId) {
            uni.setStorageSync('savedNoticeId', data.lastId)
            console.log('更新公告ID:', data.lastId)
          }
          
          // 判断是否还有更多数据
          if (notices.length < this.pageSize) {
            this.hasMore = false
          }
          
          // 处理数据
          const formattedNotices = notices.map(item => ({
            noticeId: item.noticeId,
            title: item.noticeTitle,
            brief: item.noticeContent,
            createTime: item.createTime
          }))
          
          this.newsList = refresh ? formattedNotices : [...this.newsList, ...formattedNotices]
        }
      } catch (err) {
        console.error('获取公告列表失败:', err)
        uni.showToast({
          title: err.message || '获取公告列表失败',
          icon: 'none'
        })
      } finally {
        this.loading = false
        uni.hideLoading()
      }
    }
  },
  
  async onLoad() {
    try {
      uni.showLoading({
        title: '加载中...'
      })
      // 直接获取公告列表，接口会返回最新ID
      await this.getNoticeList(true)
    } catch (err) {
      console.error('页面加载失败:', err)
      uni.showToast({
        title: '加载失败',
        icon: 'none'
      })
    } finally {
      uni.hideLoading()
    }
  },
  
  // 下拉刷新
  async onPullDownRefresh() {
    try {
      await this.getNoticeList(true)
    } catch (err) {
      console.error('刷新失败:', err)
    } finally {
      uni.stopPullDownRefresh()
    }
  },
  
  // 上拉加载更多
  async onReachBottom() {
    if (!this.hasMore || this.loading) return
    
    this.pageNum++
    await this.getNoticeList()
  }
}
</script>

<style scoped>
.news-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.news-list {
  padding: 15px;
  padding-top: 20px; /* 适当的顶部间距 */
}

.news-item {
  background-color: #ffffff;
  border-radius: 10px;
  margin-bottom: 15px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.news-content {
  padding: 15px;
}

.news-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 8px;
}

.news-brief {
  font-size: 14px;
  color: #666;
  line-height: 1.4;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.news-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}

.news-time {
  color: #999;
}

.news-status {
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
}

.unread {
  background-color: #000000;
  color: #ffffff;
}

.read {
  background-color: #f5f5f5;
  color: #999;
}

.empty-tip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 100px;
  color: #999;
}

.empty-icon {
  width: 80px;
  height: 80px;
  margin-bottom: 15px;
  opacity: 0.5;
}
</style>
